<script setup lang="ts">
import { reactive, ref } from 'vue'

// 定义页面
definePage({
  style: {
    'navigationStyle': 'default',
    'app-plus': {
      titleNView: false,
      bounce: 'none',
    },
    'h5': {
      titleNView: false,
    },
  },
})

const pagingRef = ref()

// 状态参数
const state = reactive({
  searchValue: '',
  tabKey: 0,
  swiperPage: 1,
})

// 分类菜单
const tabs = ref([
  {
    id: 1,
    name: '推荐',
  },
  {
    id: 2,
    name: '热点',
  },
  {
    id: 3,
    name: '科技',
  },
  {
    id: 4,
    name: '娱乐',
  },
  {
    id: 5,
    name: '体育',
  },
  {
    id: 6,
    name: '财经',
  },
  {
    id: 7,
    name: '军事',
  },
  {
    id: 8,
    name: '国际',
  },
  {
    id: 9,
    name: '时尚',
  },
  {
    id: 10,
    name: '汽车',
  },
])

// 幻灯数据
const swiperList = ref<{ link?: string, img: string }[]>([
  {
    link: '/pages/index/news?id=1',
    img: 'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
  },
  {
    link: '/pages/index/news?id=2',
    img: 'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
  },
  {
    link: '/pages/index/news?id=3',
    img: 'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
  },
  {
    link: '/pages/index/news?id=4',
    img: 'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
  },
])
// 列表数据
const dataList = ref<any>([])

// 请求列表
function queryList(_pageNo: number, _pageSize: number) {
  const list = [
    {
      id: 1,
      title:
          '新闻的标题1新闻的标题1新闻的标题1新闻的标题1新闻的标题1新闻的标题1新闻的标题1新闻的标题1新闻的标题1新闻的标题1新闻的标题1新闻的标题1',
      source: '官方',
      read: 60,
      photo_url: 'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
      create_time: '2021-09-09',
    },
    {
      id: 2,
      title: '新闻的标题2',
      source: '官方',
      read: 60,
      create_time: '2021-09-09',
    },
  ]
  pagingRef.value.complete([...list, ...list, ...list])
}

// 幻灯跳转
function handleSwiperClick(url?: string) {
  if (url) {
    uni.navigateTo({
      url,
    })
  }
}

// 详情跳转
function handleNewsClick(id: number) {
  uni.navigateTo({
    url: `/pages/index/news?id=${id}`,
  })
}

uni.setTabBarBadge({
  index: 2,
  text: '3',
})
</script>

<template>
  <z-paging
    ref="pagingRef"
    v-model="dataList"
    rounded-t-md
    bg-white
    m-10rpx
    mb-0
    overflow-hidden
    @query="queryList"
  >
    <template #top>
      <nut-searchbar v-model="state.searchValue" placeholder="大家都在搜：AI">
        <template #leftin>
          <nut-icon name="search" />
        </template>
        <template #rightout>
          搜索
        </template>
      </nut-searchbar>
      <nut-tabs
        v-model="state.tabKey"
        title-scroll
        title-gutter="10"
        size="large"
        background="#fff"
        pb-10rpx
      >
        <nut-tab-pane
          v-for="(item, index) in tabs"
          :key="index"
          :title="item.name"
        />
      </nut-tabs>
    </template>
    <nut-swiper
      :init-page="state.swiperPage"
      :pagination-visible="true"
      auto-play="5000"
    >
      <nut-swiper-item
        v-for="(item, index) of swiperList"
        :key="index"
        @click="handleSwiperClick(item.link)"
      >
        <img :src="item.img" alt="">
      </nut-swiper-item>
    </nut-swiper>
    <view v-if="dataList.length > 0" class="news-list">
      <view
        v-for="(item, index) in dataList"
        :key="index"
        class="line"
        @click="handleNewsClick(item.id)"
      >
        <view class="info">
          <view class="title">
            {{ item.title }}
          </view>
          <view class="sign">
            <view class="author">
              <text v-if="item.source" class="source">
                {{ item.source }}
              </text>
              <text class="time">
                {{ item.create_time }}
              </text>
            </view>
            <view class="view">
              <nut-icon name="eye" :size="12" />
              <text class="text">
                {{ item.read }}
              </text>
            </view>
          </view>
        </view>
        <view v-if="item.photo_url" class="photo">
          <image class="image" :src="item.photo_url" mode="aspectFill" />
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
  .nut-swiper-item {
    line-height: 300rpx;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .nut-tab-pane {
    padding: 0;
  }
  .news-list {
    padding: 30rpx 0 10rpx;
    .line {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 20rpx;
      .info {
        flex: 1;
        .title {
          flex-grow: 1;
          flex-shrink: 1;
          font-size: 30rpx;
          line-height: 1.5;
          display: -webkit-box;
          text-overflow: ellipsis;
          word-break: break-all;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          height: 90rpx;
          margin-bottom: 30rpx;
        }
        .sign {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24rpx;
          color: #aaa;
          .author {
            display: flex;
            align-items: center;
            .source {
              &:after {
                content: '·';
                margin: 0 10rpx;
              }
            }
          }
          .view {
            display: flex;
            align-items: center;
            .text {
              font-size: 24rpx;
              color: #999;
            }
          }
        }
      }
      .photo {
        margin-left: 20rpx;
        .image {
          width: 240rpx;
          height: 150rpx;
          border-radius: 10rpx;
        }
      }
      + .line {
        border-top: 1px solid #eee;
      }
    }
  }
</style>
